<template>
    <a-drawer
            title="查看"
            :visible="visible"
            :width="width || '1000px'"
            :confirmLoading="confirmLoading"
            @close="handleCancel"
    >
        <div class="xlSeeFrom">
            <div class="xlSeeFrom-view">
                <a-card
                        :title="columns.name"
                        v-for="(columns,columnsIndex) in formData"
                        :key="columnsIndex"
                >
                    <a-descriptions bordered :column="2">
                        <a-descriptions-item
                                v-for="(item,index) in columns.data"
                                :key="index"
                                :label="item.title"
                                :span="item.span"
                        >
                            <span v-if="item.type == 'select'">{{typeof item.typeData == 'string'?getSelectData($store.getters.dictionary[item.typeData],model[item.dataIndex]):getSelectData(item.typeData,model[item.dataIndex])}}</span>
                            <span
                                    v-else-if="item.type == 'radio'"
                            >{{typeof item.typeData == 'string'?getSelectData($store.getters.dictionary[item.typeData],model[item.dataIndex]):getSelectData(item.typeData,model[item.dataIndex])}}</span>
                            <span v-else-if="item.type == 'date'">{{getData(model[item.dataIndex],item)}}</span>
                            <span
                                    v-else-if="item.type == 'switch'"
                            >{{model[item.dataIndex]?model[item.dataIndex]=='是'?'是':'否':'否'}}</span>
                            <span
                                    v-else-if="item.type == 'dateRange'"
                            >{{getRangeData(record[item.typeData.startDate],item)+ '~' + getRangeData(record[item.typeData.endDate],item)}}</span>
                            <span v-else-if="item.type == 'input.money'">{{moneyFormat(model[item.dataIndex])}}</span>
                            <span v-else-if="item.type == 'upload'">
                                <xlImages v-model="model[item.dataIndex]" :max="0"></xlImages>
                            </span>
                            <span v-else-if="item.type == 'upload.file'">
                                <xluploadFile v-model="model[item.dataIndex]" :del-visible="false"></xluploadFile>
                            </span>
                            <span v-else-if="item.type == 'editor'">
                                <div v-html="model[item.dataIndex]">

                                </div>
                            </span>
                            <span v-else>{{ model[item.dataIndex]|| '--' }}</span>
                        </a-descriptions-item>
                    </a-descriptions>
                </a-card>
            </div>
            <div class="drawer-footer">
                <a-button @click="handleOk" type="primary">关闭</a-button>
            </div>
        </div>
    </a-drawer>
</template>
<script>
    import xlDate from '../formUntil/xlDate'
    import xlImages from '../formUntil/xlImages'
    import xluploadFile from '../formUntil/xluploadFile'

    export default {
        name: "xlForm",
        data() {
            return {
                tableTitle: '标题',
                visible: false,
                confirmLoading: false,
                model: {},
                formData: [],
                type: 1

            }
        },
        components: {
            xlDate,
            xlImages,
            xluploadFile
        },
        props: {
            width: String
        },
        methods: {
            handleOk() {
                this.confirmLoading = false
                this.visible = false
            },
            handleCancel() {
                this.visible = false
            },
            formatData(columns, formData) {
                this.formData = []
                this.model = formData
                columns.map((item, index) => {
                    if (item.key != "rowIndex" && item.dataIndex != "action" && item.type) {
                        let stack = this.formData.filter(formData => formData.name == item.stack)
                        console.log(stack)
                        if (stack.length) {
                            stack[0].data.push(item)
                        } else {
                            this.formData.push({
                                name: item.stack,
                                data: [
                                    item
                                ]
                            })
                        }

                    } else {
                        if (item.children) {
                            this.formatChild(item.children)
                        }
                    }
                })
                console.log(this.formData)
            },
            formatChild(children) {
                children.map((item, index) => {
                    if (item.key != "rowIndex" && item.dataIndex != "action" && item.type) {
                        let stack = this.formData.filter(formData => formData.name == item.stack)
                        if (stack.length) {
                            stack[0].data.push(item)
                        } else {
                            this.formData.push({
                                name: item.stack,
                                data: [
                                    item
                                ]
                            })
                        }

                    } else {
                        if (item.children) {
                            this.formatChild(item.children)
                        }
                    }
                })
            },
            getSelectData(data, text) {
                if (data) {
                    const target = data.filter(item => text == item.codeMasterValue)[0]?.codeMasterName || data.filter(item => text == item.dataValue)[0]?.dataName || '--'
                    return target
                } else {
                    return text
                }
            },
            getData(date, item) {
                if (date) {
                    if (!item?.typeData) {
                        return moment(date).format('YYYY-MM-DD')
                    }
                    if (item.typeData.type == 'date') {
                        return moment(date).format('YYYY-MM-DD')
                    }
                    if (item.typeData == 'dateTime') {
                        return moment(date).format('YYYY-MM-DD HH:mm:ss')
                    }
                    if (item.typeData == 'month') {
                        return moment(date).format('YYYY-MM')
                    }
                    if (item.typeData == 'year') {
                        return moment(date).format('YYYY')
                    }

                } else {
                    return '--'
                }
            },
            getRangeData(date, item) {
                if (date) {
                    if (item.typeData.type == 'date') {
                        return moment(date).format('YYYY-MM-DD')
                    }
                    if (item.typeData.type == 'dateTime') {
                        return moment(date).format('YYYY-MM-DD HH:mm:ss')
                    }
                    if (item.typeData.type == 'month') {
                        return moment(date).format('YYYY-MM')
                    }
                    if (item.typeData.type == 'year') {
                        return moment(date).format('YYYY')
                    }

                } else {
                    return '--'
                }
            },
            moneyFormat(num) {
                var reg = /\d{1,3}(?=(\d{3})+$)/g;
                return (num + '').replace(reg, '$&,');
            }
        }
    }
</script>

<style lang="less">
    .ant-drawer-body {
        width: 100%;
        height: calc(100% - 55px);

        .xlSeeFrom {
            width: 100%;
            height: 100%;

            .xlSeeFrom-view {
                width: 100%;
                height: calc(100% - 50px);
                overflow-y: scroll;

                .ant-descriptions-item-label {
                    padding: 16px;
                    word-break: keep-all;
                }

                .ant-card {
                    margin-bottom: 10px;
                }
            }

            .drawer-footer {
                width: 100%;
                height: 50px;
                border-top: 1px solid #e8e8e8;
                border-radius: 0 0 4px 4px;
                display: flex;
                align-items: center;
                justify-content: flex-end;
            }
        }
    }
</style>
